<template>


        <div class="super_container">

                <myheader></myheader>
            
                <!-- Home -->
            
                
            
                <!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll"   ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">Shop</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li><a href="#">Woman</a></li>
						<li>Accessories</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Products -->

	<div class="products">

		<!-- Sorting & Filtering -->
		<div class="products_bar">
			<div class="section_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div class="products_bar_content d-flex flex-column flex-xxl-row align-items-start align-items-xxl-center justify-content-start">
								<div class="product_categories">
									<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
										<li class="active"><a href="#">All</a></li>
										<li><a href="#">Hot Products</a></li>
										<li><a href="#">New Products</a></li>
										<li><a href="#">Sale Products</a></li>
									</ul>
								</div>
								<div class="products_bar_side ml-xxl-auto d-flex flex-row align-items-center justify-content-start">
									<div class="products_dropdown product_dropdown_sorting">
										<div class="isotope_sorting_text"><span>Default Sorting</span><i class="fa fa-caret-down" aria-hidden="true"></i></div>
										<ul>
											<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "original-order" }'>Default</li>
											<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "price" }'>Price</li>
											<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "name" }'>Name</li>
										</ul>
									</div>
									<div class="product_view d-flex flex-row align-items-center justify-content-start">
										<div class="view_item active"><img src="../assets/images/view_1.png" alt=""></div>
										<div class="view_item"><img src="../assets/images/view_2.png" alt=""></div>
										<div class="view_item"><img src="../assets/images/view_3.png" alt=""></div>
									</div>
									<div class="products_dropdown text-right product_dropdown_filter">
										<div class="isotope_filter_text"><span>Filter</span><i class="fa fa-caret-down" aria-hidden="true"></i></div>
										<ul>
											<li class="item_filter_btn" data-filter="*">All</li>
											<li class="item_filter_btn" data-filter=".hot">Hot</li>
											<li class="item_filter_btn" data-filter=".new">New</li>
											<li class="item_filter_btn" data-filter=".sale">Sale</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="products_container grid">
							
							<!-- Product -->
							<div class="product grid-item hot"  v-for="g in goodslist">
								<div class="product_inner">
									<div class="product_image">
										<img :src="getImgurl(g.img)" alt="">
									</div>
									<div class="product_content text-center">
										<div class="product_title"><router-link :to="list(g.id)">{{ g.goodname }}</router-link></div>
										<div class="product_price">${{ g.price }}</div>
										<div class="product_button ml-auto mr-auto trans_200"><a :href="'/cart/?id=' + g.id">添加到购物车</a></div>
									</div>
								</div>	
							</div>

							

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
     
      
      export default {
        data () {
          return {
            msg: "这是一个变量",
			dataList:[],
			
			goodslist:[],

            clicked:0,
            upath: '',
          result: '',
          uping:0
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){

			this.common.get_menu();
			
			let id = this.$route.query.id
			var _this = this
			var url = this.base_url + '/webindextwo'
			var data = {
				'id':id
			}
			this.axios.post(url,this.qs.stringify(data))
			.then(function(result){
			console.log(result.data['goodslist'][0]);
			_this.goodslist = result.data['goodslist'];
			})
        },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			list:function(id){
                var list_url = '/product?id='
                var url = list_url+id;
                return url;
            },
            getImgurl:function(image){
                let image_url = this.base_url+'/static/upload/'
                let url = image_url+image
                return url
            }
        }
      }
      
      
      </script>
       
      <style>
      
            @import '../assets/styles/categories.css';
			@import '../assets/styles/categories_responsive.css';
      
      </style>